<template>
  <div class="app-container">
    <div class="handle-content">
			<el-select v-model="value" placeholder="请选择状态类型">
			  <el-option
			    v-for="item in options"
			    :key="item.value"
			    :label="item.label"
			    :value="item.value">
			  </el-option>
			</el-select>
      <el-input v-model="user_id" placeholder="请输入用户ID" style="width: 250px;margin-right: 10px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
      <el-button slot="append" @click="agree">同意选中</el-button>
      <span class="right">
        <el-button type="primary" @click="exportExcel">
          导出
        </el-button>
      </span>
    </div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
        label="会员ID"
        width="100">
        <template slot-scope="scope">{{ scope.row.user_id }}</template>
        </el-table-column>
        <el-table-column
        prop="realname"
        label="平台姓名"
        width="100">
        <template slot-scope="scope">{{ scope.row.realname }}</template>
        </el-table-column>
        <el-table-column
        prop="accepter_name"
        label="持卡人"
        width="100">
				<template slot-scope="scope">{{ scope.row.accepter_name }}</template>
        </el-table-column>
        <el-table-column
        prop="accepter_phone"
        label="持卡人手机"
        width="120"
        show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.accepter_phone }}</template>
        </el-table-column>
				<el-table-column
				prop="withdraw"
				label="申请提现金额"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.withdraw }}</template>
				</el-table-column>
				<el-table-column
				prop="reality_account"
				label="实际应到账"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.reality_account/100 }}</template>
				</el-table-column>
				<el-table-column
				prop="bank_name"
				label="银行名称"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.bank_name }}</template>
				</el-table-column>
				<el-table-column
				prop="deposit"
				label="开户行信息"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.deposit }}</template>
				</el-table-column>
				<el-table-column
				prop="bank_code"
				label="银行卡号"
        width="150"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.bank_code }}</template>
				</el-table-column>
				<el-table-column
				prop="state_cn"
				label="状态"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.state_cn }}</template>
				</el-table-column>
        <el-table-column
        prop="why"
        label="拒绝原因"
        width="120">
        <template slot-scope="scope">{{ scope.row.why }}</template>
        </el-table-column>
				<el-table-column
				prop="apply_at"
				label="申请时间"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.apply_at }}</template>
				</el-table-column>
				<el-table-column
				prop="examine_at"
				label="审核时间"
				show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.examine_at }}</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
				  <template slot-scope="scope">
				    <el-button title="拒绝" type="primary" circle icon="el-icon-edit" @click="handle(scope.row.id)" />
				  </template>
				</el-table-column>
    </el-table>
    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
		<withdraws-handle ref="withdrawsHandle" @afterSave="afterSave" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getList, agree } from '@/api/withdraws'
import WithdrawsHandle from './component/handle'
import { getToken } from '@/utils/auth' // get token from cookie
import { Message } from 'element-ui'
export default {

  components: { Pagination, WithdrawsHandle },

  data() {
    return {
        tableData: [],
        multipleSelection: [],
        listQuery: {
          page: 1,
          storeId: '',
          pageSize: 20,
					status: '',
					user_id: '',
        },
        total:0,
				path:'',
        user_id:'',
				value:'',
				options: [{
					value: '0',
					label: '待审核'
				}, {
					value: '1',
					label: '已同意'
				}, {
					value: '2',
					label: '已拒绝'
				}],
				selectArr:[],
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      getList(this.listQuery).then(response => {
        this.tableData = response.data.data
        this.total = response.data.total
				this.path = response.data.path
      })
    },

    handleSelectionChange(val) {
        this.multipleSelection = val;
				console.log(val);
        this.selectArr = [];
				if(val.length > 0){
          for(var i = 0;i < val.length;i++){
            console.log(val[i].id);
            this.selectArr.push(val[i].id);
          }
				}
				console.log(this.selectArr);
    },

    search() {
        this.listQuery.user_id = this.user_id
        this.listQuery.status = this.value
        this.listQuery.page = 1
        this.getList()
    },

    agree() {
        agree({ id: this.selectArr }).then(res => {
          Message.success(res.data.info)
          this.getList()
        })
    },

    handle(id) {
      this.$refs.withdrawsHandle.handle(id)
    },

    afterSave() {
      this.getList()
    },

		exportExcel() {
		  const url = this.path + '?user_id=' + this.listQuery.user_id + '&status=' + this.listQuery.status + '&pageSize=' + this.listQuery.pageSize + '&page=' + this.listQuery.page + '&token=' + getToken() + '&report=' + true

		  location.href = url
		}
  }
}
</script>
